<template>
  <div id="app">
    <!-- <van-empty description="商店页面,敬请期待" /> -->
    <!-- 搜索框 -->
    <div id="header">
      <div class="left">
        <van-icon name="search" />
        <input class="search" type="text" placeholder="搜索">
        <van-icon name="scan" />
      </div>
      <div class="right">
        <van-icon name="shopping-cart-o" />
        <van-icon name="comment-o" />
      </div>
    </div>

    <h2 text-align="left">推荐</h2>

    <!-- 大图 -->
    <div class="container" @click="$router.push('/product')">
      <img style="margin: 10px 0;object-fit: cover;"
        src="https://cdn7.axureshop.com/demo/2090757/images/%E5%95%86%E5%BA%97/u961.png" alt="">
      <p class="top">设计感十足的铁艺家具</p>
      <p class="center">金属 | 欧美</p>
      <p>￥ 225</p>
      <seven></seven>
    </div>

    <!-- 小图 -->
    <div class="content">
      <sevent-small v-for="item in 10" :key="item"></sevent-small>
    </div>

  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  // width: 480px;
  height: auto;
  margin: 0 auto;
  padding: 10px 20px;
  // border: 1px solid #333;

  #header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    white-space: nowrap;
    // position: sticky;

    >.left {
      background-color: #f8f8f8;
      width: 40%;
      height: 60%;
      overflow: hidden;
      border-radius: 50px;
      padding: 5px 10px;
      display: flex;
      align-items: center;

      >.search {
        width: 100%;
        height: auto;
        border: none;
        outline: none;
        background-color: transparent;
        padding: 0 5px;
        font: normal 400 12px/1.5 sans-serif;
      }
    }

    >.right {
      line-height: calc(60px - 16px);

      >i {
        text-align: center;
        background-color: #f8f8f8;
        width: 32px;
        height: 32px;
        vertical-align: top;
        line-height: 32px;
        border-radius: 50px;
        margin-left: 30px;
      }
    }
  }

  .container {
    color: #333;
    font-size: 18px;

    .top {
      font-weight: 600;
    }

    .center {
      font-size: 14px;
      color: gray;
      margin: 5px 0;
    }
  }

  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
</style>